<div v-cloak id="app" class="main-content">
    <one-table :option="option" :data="data" :loading="loading"  @current-change="handleCurrentChange" @size-change="handleSizeChange">
        <!-- 工具菜单 -->
        <template slot="menuLeft">
            <el-button type="primary" size="mini" @click="handleAdd">添加</el-button>
        </template>
        <template slot="default" slot-scope="scope">
            <el-tag v-if="scope.row.default == 1">默认</el-tag>
        </template>
        <template slot="default" slot-scope="scope">
            <el-switch v-model="scope.row.default" :active-value="1" :inactive-value="0"
                @change="changeDefault(scope.row)">
            </el-switch>
        </template>
        <template slot="status" slot-scope="scope">
            <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0"
                @change="changeSwitch(scope.row)">
            </el-switch>
        </template>
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-button size="mini" :disabled="scope.row.system" class="_tool" @click="handleEdit(scope.row, scope.index)">
                <i class="el-icon-edit"></i>
            </el-button>
            <el-popconfirm
                confirm-button-text='好的'
                cancel-button-text='不用了'
                icon="el-icon-info"
                icon-color="red"
                title="删除不能恢复,确定删除吗？"
                @confirm="handleDel(scope.row, scope.index)"
            >
            <el-button :disabled="scope.row.system" slot="reference" size="mini" class="_tool" type="danger">
                <i class="el-icon-delete"></i>
            </el-button>
            </el-popconfirm>
        </template>
    </one-table>
</div>
{include file='common@components/one-table'}
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                data: [],
                option: {
                    index: false,
                    header: true,
                    selection: false,

                    operates: {width:100},
                    page: {},
                    size: 'mini',
                    column: [
                        {
                            label: '等级ID',
                            prop: 'id',
                        },
                        {
                            label: '等级名称',
                            prop: 'name',
                        },
                        {
                            label: '会员有效期(天)',
                            prop: 'expire',
                        },
                        {
                            label: '是否默认',
                            prop: 'default',
                            slot: true
                        },
                        {
                            label: '状态',
                            prop: 'status',
                            slot: true
                        },
                    ]
                }
            }
        },

        created() {
            this.getData()

        },
        methods: {
            // 获取数据
            getData() {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'user/group/index',
                        page: _this.option.page.currentPage,
                        limit: _this.option.page.pageSize,
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    _this.data = e.data.data.list
                    _this.option.page.total = e.data.data.count;
                })
            },
            //分页
            handleCurrentChange(currentPage) {
                let _this = this;
                _this.option.page.currentPage = currentPage;
                _this.getData();
            },
            //每页显示数
            handleSizeChange(val) {
                let _this = this;
                _this.option.page.pageSize = val
                _this.getData();
            },
            //改变状态
            changeSwitch(row) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'user/group/status/',
                        id: row.id,
                        val: row.status,
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false;
                    _this.getData();
                })
            },
           
            //改变默认
            changeDefault(row) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'user/group/setdefault/',
                        id: row.id,
                        val: row.status,
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false;
                    _this.getData();
                })
            },
           
            //删除行
            handleDel (row, index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'user/group/del/',
                		id:row.id,
                	},
                	method: 'post'
                }).then(e => {
                    _this.data.splice(index, 1)
                	_this.loading = false
                })
            },
            //添加
            handleAdd() {
                let _this = this
                navigateTo({
                    s: 'user/group/edit',
                })
            },
            //编辑
            handleEdit(row, index){
                let _this = this
                navigateTo({
                    s: 'user/group/edit',
                    id:row.id,
                })
            },
           
        }
    })
</script>